<BrowserRouter>

这个组件原理是基于HTML5 history的API，所以IE9以下浏览器是不支持的。

先上一个最简单的例子：

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Link,
    Route
} from 'react-router-dom';

class MyComponent extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Link to="/">Home</Link>
                    <Link to="/about">About</Link>
                    <Route path="/" component={()=>(<h1>Home</h1>)} />
                    <Route path="/about" component={()=>(<h1>About</h1>)} />
                </div>
            </Router>
        );
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector("#root"));

这里用别名Router来代替BrowserRouter，Link组件看起来就是一个超链接（这么说不大准确，后续会介绍该组件），Route就是匹配不同的路由来渲染不同的组件（path和component属性）。

组件必须有一个根节点，所以这里有一个div标签。这时，访问"/"页面上会渲染出Home，访问"/about"页面上会渲染出Home和About，哎不对呀，怎么Home也渲染了？其实只是缺一个属性，后续后介绍。至此，一个最简单的demo就跑起来了。

basename:string

作用：该属性看名字就明白了，为所有的位置添加一个基准的URL：

<Router basename="/second">
    <div>
        <Link to="/react">react</Link>
    </div>
</Router>

实际渲染出来就是“/second/react”，这个basename的值会追加到Link的to属性、Route的path属性前边。

getUserConfirmation:func

作用：导航到此页面前执行的函数

const fn = ()=>{alert('react')}
<Router getUserConfirmation={fn()}>
    <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Route path="/" component={()=>(<h1>Home</h1>)} />
        <Route path="/about" component={()=>(<h1>About</h1>)} />
    </div>
</Router>

上例，在进入该页面前会出现一个alert弹窗。

注意这里传一个函数名，该函数是不会执行的，比如 getUserConfirmation={fn}。

该属性是添加到Router上的，意味着页面进入"/"或者"/about"都会触发。但这个进入并不是home和about互相切换、前进后退，而是刷新浏览器或者直接地址栏访问回车才会触发。

总体来说这个功能很少会用到。

forceRefresh:bool

作用：对于不支持H5 history API的浏览器，通过刷新来导航。

<Router forceRefresh={true}>
    <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Route path="/" component={()=>(<h1>Home</h1>)} />
        <Route path="/about" component={()=>(<h1>About</h1>)} />
    </div>
</Router>

设置为true的时候，即使是支持H5 history API的浏览器，切换路由也会通过刷新的方式来实现，那么默认应该就是false了。

所以，这里的值更应该是执行一个函数，用该函数来判断浏览器是否支持H5 history API。

keyLength:number

作用：用来设置组件props属性的location.key的长度，默认是6（数字字母组合）。

class AboutComponent extends React.Component{
    componentDidMount(){
        console.log(this.props.location.key)
    }
    render(){
        return(<h1>About</h1>)
    }
}
class MyComponent extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Link to="/">Home</Link>
                    <Link to="/about">About</Link>
                    <Route path="/" component={()=>(<h1>Home</h1>)} />
                    <Route path="/about" component={AboutComponent } />
                </div>
            </Router>
        );
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector("#root"));

首先，在Route中的组件才可以在props中接收到location（后续会介绍），所以这里我把匹配"/about"路由的组件单独提出来了。每次切换到"/about"，在生命周期函数中都会打印出不同的key。

至于key用来干嘛的，我现在还不是很明确，后续补充。

children:node

作用：所有的组件都自带children，渲染唯一子元素。

class MyComponent extends React.Component{
    render(){
        return(
            <div>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Route path="/" component={()=>(<h1>Home</h1>)} />
                <Route path="/about" component={()=>(<h1>About</h1>)} />
            </div>
        );
    }
}
ReactDOM.render(<Router><MyComponent/></Router>,document.querySelector("#root"));

//等价于

class MyComponent extends React.Component{
    render(){
        return(
            <div>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Route path="/" component={()=>(<h1>Home</h1>)} />
                <Route path="/about" component={()=>(<h1>About</h1>)} />
            </div>
        );
    }
}
ReactDOM.render(<Router children={<MyComponent/>} />,document.querySelector("#root"));

<HasRouter>

该路由组件主要有4个属性，basename、getUserConfirmation、children的表现行为与<BrowserRouter>相同，不再赘述。这里主要讲一下hashType。

import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter as Router,
    Link,
    Route
} from 'react-router-dom';

class MyComponent extends React.Component{
    render(){
        return(
            <Router basename="/geralt">
                <div>
                    <Link to="/">Home</Link>
                    <Link to="/about">About</Link>
                    <Route path="/" component={()=>(<h1>Home</h1>)} />
                    <Route path="/about" component={()=>(<h1>About</h1>)} />
                </div>
            </Router>
        );
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector("#root"));

hashType有三种类型，默认"slash"

"slash"，对于上例，实际的访问路由就是 “/#/geralt/”和"/#/geralt/about"
"noslash"，对于上例，实际的访问路由就是"/#geralt/"和"/#geralt/about"
"hashbang"，对于上例，实际的访问路由就是"/#!/geralt/"和"/#!/geralt/about"

该组件路由是基于锚点的，Has history不支持location.key和location.state，只是用来支持旧浏览器的，还是推荐使用<BrowserRouter>，同时重复点同一个路由会提示：

"Hash history cannot PUSH the same path; a new entry will not be added to the history stack"

BrowserRouter组件